<template>
	<div class="bookgit">
		<div class="tablist">
			<!-- 出版社 -->
			<div class="swiper-container presslist" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide"><button @click="allbook()">全部</button></li>
					<li class="swiper-slide" v-for="(item,i) in pressList" :key="i">
						<button @click="a(item,0)">{{item}}</button>
					</li>
				</ul>
			</div>
			<div class="swiper-container presslist" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide"><button @click="allbook()">全部</button></li>
					<li class="swiper-slide" v-for="(item,i) in authorlist" :key="i">
						<button @click="a(item,0)">{{item}}</button>
					</li>
				</ul>
			</div>
			<div class="swiper-container presslist" style="border-bottom: 1px dotted white;">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide"><button @click="allbook()">全部</button></li>
					<li class="swiper-slide" v-for="(item,i) in hotlist" :key="i">
						<button @click="hotbtn(item.num)">{{item.name}}</button>
					</li>
				</ul>
			</div>
		</div>
		<div>
			<MobileBooks :proplist='list'></MobileBooks>
			<span v-if="!this.isLoading">
				{{itle}}
			</span>
		</div>

	</div>
</template>

<script>
	//导入swiper组件【周期函数内，第一第二阶段，如果是请求的数据进行轮播，建议在第三阶段执行/监听器内执行】
	import MobileBooks from '@/components/mobile/booklist/MobileBooks.vue';
	import Swiper from 'swiper';
	export default {
		name: 'MobileBooksGit',
		components: {
			MobileBooks
		},
		data() {
			return {
				bookstal: 0,
				itle: '',
				list: [],
				page: 0, //当前页数
				num: 100, //多少数据
				typeid: 0, //类型
				pressList: [],
				isLoading: true, //是否有数据可以加载
				authorlist: [], // 作者名称
				hotlist: [{
						id: 1,
						name: '销量榜',
						num: 1
					},
				]
			}
		},
		//组件模板渲染完成后
		mounted() {
			//调用轮播对象
			new Swiper('.presslist', {
				//调整轮播项之间的间距
				// spaceBetween :20,
				// 设置根据宽度自动显示的轮播项数量
				spaceBetween: 10,
				momentumRatio: 2,
				slidesPerView: 'auto',
				noSwipingClass: 'stop-swiping',
				freeMode: true,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
			});
		},
		methods: {
			allbook() {
				let total = 0;
				this.list = [];
				this.isLoading = true;
				this.page = 0
				this.page = this.page + 1; //每次分页+1
				if (this.isLoading == true) {
					this.$axios.get('/api/public/findPageBook/' + this.page + '/' + this.num + '/' + this.typeid)
						.then((res) => {
							if (res.status == 200) {
								this.bookstal = res.data.data
								this.list.push(...res.data.data.books);
								this.num = this.list.length;
								this.isLoading = true;
								if (this.bookstal.total == (this.num * this.page)) {
									this.isLoading = false;
									this.itle = '客官，下面已经没有数据啦！';
								}
								console.log('222222222222222222');
							}
						}).catch((error) => {
							console.log(error);
						})
				}
			},

			hotbtn(i) {
				this.list = [];
				this.$axios.get('/api/public/book/findTopSale/5').then((res) => {
					res.data.data.forEach((item) => {
						this.list.push(item);
						console.log(this.hotlist);
					})
				})
			},

			bookshow() {
				let list = [];
				this.$axios.get('/api/public/book/findTopSale/20').then((res) => {
					if (res.status == 200) {
						list = res.data.data;
						list.forEach((item, i) => {
							this.pressList.push(item.maker);
							this.authorlist.push(item.author)
						})
						this.pressList = Array.from(new Set(this.pressList));
						this.authorlist = Array.from(new Set(this.authorlist));

						console.log(this.authorlist);
					}
				}).catch((error) => {
					console.log(error);
				})
			},

			a(i, e) {
				let total = 0;
				this.page = e;
				if (this.page == 0) {
					this.list = [];
				}
				console.log('333');
				this.page = this.page + 1; //每次分页+1
				console.log(i);
				let param = new FormData();
				param.append("start", this.page);
				param.append("num", this.num);
				param.append("key", i);
				this.$axios.post('/api/public/book/findPageKey/' + this.page + '/' + this.num, param).then((res) => {
					this.bookstal = res.data.data
					total = this.bookstal.total / this.num
					total = Math.ceil(total)
					console.log(total);
					console.log(this.page <= total);
					if (this.page <= total) {
						this.list.push(...res.data.data.books);
						if (this.bookstal.total == (this.num * this.page)) {
							this.itle = '客官，下面已经没有数据啦！';
						} else {
							this.a(i, this.page);
						}
					}
				}).catch((error) => {
					console.log(error);
				})
				console.log('4444');
			},
		},
		created() {
			this.allbook();
			this.bookshow();
		},
	}
</script>

<style scoped>
	.bookgit {
		width: 100%;
		height: 200vw;
		text-align: center;
		background-color: #f5d5a0;
	}

	.bookgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
		border-top: 1px dotted white;
		border-bottom: 1px dotted white;
	}

	.bookgit .tablist .tab {

		line-height: 2.5rem;
	}

	.bookgit .tablist .tab li {
		color: #715e3e;
		font-size: 0.875rem;
		/* 不设置任何宽度，包括里0 */
		width: unset;
		margin-right: 0.8rem;
		margin-left: 0.3rem;
		border-bottom: 0.3rem solid gold;
	}

	.bookgit .tablist .tab button {
		border: none;
		background-color: unset;
	}

	.bookgit span {
		width: 100%;
		height: 5rem;
		display: inline-block;
		justify-content: space-between;
		background-color: #f5d5a0;
		/* color: cadetblue; */
	}
</style>